<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-form :schema="schema" :data="data" />
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考t-form组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>其他事件参考t-form组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
      <div>其他插槽根据配置（schema）确定</div>
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { IConfigSchema, LgForm } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import mock from '@/utils/mockUtils';

const schema: IConfigSchema<any>[] = [
  {
    field: 'a',
    label: '字段a',
    dataType: 'string',
  },
  {
    field: 'b',
    label: '字段b',
    dataType: 'number',
  },
  {
    field: 'c',
    label: '字段c',
    dataType: 'boolean',
  },
  {
    field: 'd',
    label: '字段d',
    dataType: 'datetime',
  },
];

const data = mock.mockData({
  total: 1,
  data: {
    id: (i) => i,
    a: (i) => mock.mobile(),
    b: (i) => mock.number(0, 100),
    c: (i) => mock.boolean(),
    d: (i) => mock.birthday(),
  },
})[0];

const propsData = [
  { name: 'schema', desc: '结构配置（必填）', type: 'IConfigSchema[] | IFormSchema[]', def: '' },
  { name: 'data', desc: '表单数据', type: 'any', def: '' },
  { name: 'isUpdate', desc: '是否是更新', type: 'boolean', def: '' },
  { name: 'gridProps', desc: 'LgGrid 宫格配置属性', type: 'LgGridProps', def: '' },
  { name: 'colProps', desc: 't-col 配置属性', type: 'ColProps', def: '' },
  { name: 'formItemProps', desc: 't-form-item 配置属性', type: 'FormItemProps', def: '' },
];

const emitData = [];

const apiData = [
  { name: 'formRef', desc: 't-form引用', type: 'ref', sample: '' },
  { name: 'getData', desc: '获取表单数据', type: 'function', sample: '' },
  { name: 'validate', desc: '表单校验', type: 'function', sample: '' },
  { name: 'reset', desc: '表单重置（参考t-form）', type: 'function', sample: '' },
  { name: 'clearValidate', desc: '清空校验（参考t-form）', type: 'function', sample: '' },
  { name: 'setValidateMessage', desc: '设置校验信息（参考t-form）', type: 'function', sample: '' },
];

const slotData = [
  { name: 'prepend', desc: '表单最前面的位置', scope: '' },
  { name: 'append', desc: '表单最后面的位置', scope: '' },
];
</script>
